<template>
  <div class="divBox">
   <el-card class="box-card">
    <el-form
      ref="editPram"
      :model="editPram"
      :rules="rules"
      label-width="130px"
    >
      <el-form-item label="选择会员类型" prop="type">
        <el-select v-model="editPram.type" placeholder="请选择会员类型">
          <el-option
            v-for="item in dengjiList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        v-if="editPram.type == 1"
        label="会员升级经验值"
        prop="experience"
      >
        <el-input
          v-model="editPram.experience"
          placeholder="请输入会员升级经验值"
        ></el-input>
      </el-form-item>
      <el-form-item label="会员等级名称" prop="name">
        <el-input
          v-model="editPram.name"
          placeholder="请输入会员等级名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="会员等级" prop="grade">
        <el-input
          v-model="editPram.grade"
          placeholder="请输入会员等级"
        ></el-input>
      </el-form-item>
      <el-form-item label="积分倍数" prop="integralRatio">
        <el-input
          v-model="editPram.integralRatio"
          placeholder="请输入会员积分倍数"
        ></el-input>
      </el-form-item>
      <el-form-item label="会员等级图片" prop="icon">
        <el-input
          v-model="editPram.icon"
          placeholder="请输入会员等级图片"
        ></el-input>
      </el-form-item>
      <el-form-item label="商家：">
        <el-select
          v-model="editPram.shopId"
          clearable
          placeholder="请选择商家"
          @change="shopChange"
        >
          <el-option
            v-for="item in shopList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="选择权益：">
        <el-select style="width: 100%" v-model="editPram.rights" multiple placeholder="请选择权益">
    <el-option
      v-for="item in rightList"
      :key="item.id"
      :label="item.name"
      :value="item.id">
    </el-option>
  </el-select>
      </el-form-item>
      <div class="submit_btn">
      <el-button type="primary" size="mini" @click="handlerSubmit('editPram')">提交</el-button>
      </div>
    </el-form>
  </el-card>
</div>

</template>
<script>
import {  getQuanyiList } from '@/api/quanyi'
import {  addDengji, updateDengji } from '@/api/dengji'
import { shopListApi } from '@/api/shopPoint';
import { dengjiList } from '@/utils/constants' 
export default {
   props: {
   prent: {
     type: Object,
     required: true,
   },
   isCreate: {
     type: Number,
     default: 0,
   },
    editData: {
     type: Object,
   },
 },
 data() {
   return {
     loadingBtn: false,
     editPram: {
       id: 0,
       type: null,
       experience: null,
       name: null,
       grade: null,
       icon: null,
       shopId: null,
       rights: null,
       isShow: 1,
       integralRatio: null
     },
     rightList: [],
     shopList: [],
    dengjiList,

     rules: {
       type: [{ required: true, message: "请输入会员类型", trigger: "change" }],
       experience: [{ required: true, message: "请输入升级经验值", trigger: "blur" }],
       name: [{ required: true, message: "请输入会员等级名称", trigger: "blur" }],
       grade: [{ required: true, message: "请输入会员等级", trigger: "blur" }],
       icon: [{ required: true, message: "请输入会员图片", trigger: "blur" }],
       shopId: [ { required: true, message: "请选择选择商家", trigger: "change" }],
     },
   };
 },
  mounted() {
   this.initEditData();
 },
   methods: {
   initEditData() {
     this.getShopList();
     const {
       id,
       type,
       experience,
       name,
       grade,
       icon,
       shopId,
       rights
     } = this.editData;
     if (this.isCreate === 1) {
       this.editPram.id = id;
       this.editPram.type = type;
       this.editPram.experience = experience;
       this.editPram.name = name;
       this.editPram.grade = grade;
       this.editPram.icon = icon;
       this.editPram.shopId = Number(shopId);
       this.editPram.rights= rights;
       this.editPram.integralRatio= integralRatio;
       this.shopChange(shopId);
     }
   },
   getShopList() {
     shopListApi({
       page: 1,
       limit: 100,
       status: 1,
       temp: new Date().getTime(),
     }).then((res) => {
       this.shopList = res.list;
     });
   },
   shopChange(e) {
     getQuanyiList({
       type: 1,
       shopId: e,
       page: 1,
       limit: 100,
     }).then((res) => {
       console.log(res, "res----");
       this.rightList = res.list;
     });
   },
   handlerSubmit(formName) {
       this.$refs[formName].validate((valid) => {
       if (!valid) return
       this.handlerSaveOrUpdate(this.isCreate === 0)
     })
   },
   handlerSaveOrUpdate(isSave) {
     if (isSave) {
       this.loadingBtn = true
       addDengji(this.editPram).then(data => {
         this.$emit('hideEditDialog')
         this.$message.success('创建成功')
         this.loadingBtn = false
         this.$router.push({ path: '/dengji/list' });
       }).catch(() => {
         this.loadingBtn = false
       })
     } else {
       console.log(this.editPram,'111111111111111111111')
       this.loadingBtn = true
       updateDengji(this.editPram,this.editPram.id).then(data => {
         this.$emit('hideEditDialog')
         this.$message.success('更新成功')
         this.loadingBtn = false
         this.$router.push({ path: '/dengji/list' });
       }).catch(() => {
         this.loadingBtn = false
       })
     }
   }
 },
}
</script>

<style lang="scss" scoped>
.submit_btn {
       display: flex;
       justify-content: flex-end;
   }
</style>